<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: orange;
            color:#fff;
            font-size: 20px;
        }

        .two{
            width: 300px;
            height: 300px;
            background-color: pink;
            color:black;
        }


        .three{
            font-size: 30px;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            color:#fff;
            font-size: 20px;  
        }


        div.active{
            width: 300px;
            height: 300px;
            background-color: green;
            color:red;
            font-size: 30px;  
        }
    </style>
</head>
<body>
    <!-- <div class="one two three">
        我是div中的内容
    </div> -->

    <button>切换</button>
    <div class="one three">
        我是div中的内容我切换给你看
    </div>
    <script>
        /* 
            dom操作类名
            语法1:
                读
                    元素.className
                    得到完整的类名  字符串
                写
                    
                    元素.className = '新值'
                    完全覆盖原来的类名

                追加类名
                    元素.className += ' 新值';注意类和类名之间 有个空格 别忘了  

                
            语法2:
                每个元素天生自带一个属性 classList,这是个对象数据结构
                记录了所有的类名 

                // 追加 
                //  元素.classList.add(类名)

                // 删除 
                //  元素.classList.remove(类名)

                // 切换
                //  元素.classList.toggle(类名)
                //  原来有这个类  把原来的类删除了
                //  原来没有这个类 添加这个类
        
        
        */

        // 语法1
        // var divEle = document.querySelector('div');
        // console.log(divEle.className);
        // divEle.className = 'two';
        // console.log(divEle.className);
        // divEle.className += ' three'


        // var divEle = document.querySelector('div');
        // console.dir(divEle);


        // 语法2:
        var divEle = document.querySelector('div');
        // divEle.classList.add('haha');
        // divEle.classList.remove('three');
        var btn = document.querySelector('button');
        btn.onclick = function(){
            divEle.classList.toggle('active')
        }
    </script>
</body>
</html>